<template>
  <div class="container">
    <div class="top">用户管理</div>
    <div class="banner">
      <div class="left1">
        <span class="a">部门树</span>
        <div class="b">
          <el-input placeholder="请输入" suffix-icon="el-icon-search" v-model="filterText"></el-input>
          <div class="tree">
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
              ref="tree"
            ></el-tree>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="top1">
          <div class="left">
            <!-- 角色 -->
            <span>用户名称：</span>
            <el-input v-model="input1" class="first" placeholder="请输入角色名称"></el-input>
            <!-- 状态 -->
            <span>状态：</span>
            <el-select v-model="value" placeholder="请选择" class="second">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
          <div class="right">
            <!-- 新建 -->
            <NewUser :get="get" showBetCode1="xtsz-yhgl-xj"></NewUser>
            <DeleteAll1 :multipleSelection="multipleSelection" :get="get" showBetCode2="xtsz-yhgl-sc"></DeleteAll1>
          </div>
        </div>
        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width:1245px"
          border
          stripe
          :cell-style="changeCellStyle"
          :header-cell-style="rowClass"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="48" align="center"></el-table-column>
          <el-table-column prop="loginName" label="登录名" width="166" align="center"></el-table-column>
          <el-table-column prop="realName" label="用户名称" align="center" width="150"></el-table-column>
          <el-table-column prop="orgPath" label="所属部门及岗位" align="center" width="207"></el-table-column>
          <el-table-column prop="roleInfo" label="所属角色" align="center" width="146"></el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="105">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">
                <span class="green-border"></span>
                <span>启用</span>
              </div>
              <div v-else>
                <span class="red-border"></span>
                <span>停用</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="165" align="center">
            <template slot-scope="scope">{{ scope.row.updatedTime }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="257px">
            <template slot-scope="scope" v-if="name!==scope.row.realName">
              
              <!-- 编辑 -->
              <EditUser :id1="scope.row.id" showBetCode3="xtsz-yhgl-bj" :click="get"> </EditUser>
              <!-- 查看 -->
              <span class="look" @click="look(scope.row)">查看</span>
              <!-- 删除 -->
              <SingleDeletion :clearOne="clearOne" :id="scope.row.id" showBetCode4="xtsz-yhgl-sc"></SingleDeletion>

              <!-- 启用 -->
              <Stop1 v-if="scope.row.status ==2" :id="scope.row.id" :click="get" showBetCode5="xtsz-yhgl-qy"></Stop1>
              <!-- 停用 -->
              <Stop2 v-else :id="scope.row.id" :click="get" showBetCode6="xtsz-yhgl-jy"></Stop2>
              <!-- 重置 -->
              <Reset :id="scope.row.id" :click="get" showBetCode7="xtsz-yhgl-czmm"></Reset>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            background
            :page-sizes="[2, 5,10]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 角色说明 -->

    <el-dialog title="用户查看" :visible.sync="dialogVisible" width="30%">
     
      <div>
        <span class="a">登录名：</span>
        <span class="b">{{this.role}}</span>
      </div>
      <div>
        <span class="a">所属部门/岗位：</span>
        <span  class="b">{{this.job}}</span>
      </div>
      <div>
        <span class="a">状态：</span>
        <span  class="b">{{this.status+""}}</span>
      </div>
      <div>
        <span class="a">电子邮件：</span>
        <span  class="b">{{this.email}}</span>
      </div>
    
    </el-dialog>
  </div>
</template>
<script>
import SingleDeletion from "@/components/XT/Role/SingleDeletion.vue";
import NewUser from "@/components/XT/Role/NewUser.vue";
import EditUser from "@/components/XT/Role/EditUser.vue";
import Person from "@/components/XT/Role/Person.vue";
import Limit from "@/components/XT/Role/Limit.vue";
import Delete from "@/components/XT/Role/Delete.vue";
import Stop1 from "@/components/XT/Role/Stop1.vue";
import Stop2 from "@/components/XT/Role/Stop2.vue";
import Reset from "@/components/XT/Role/Reset.vue";
import DeleteAll1 from "@/components/XT/Role/DeleteAll1";
export default {
  components: {
    SingleDeletion,
    NewUser,
    EditUser,
    DeleteAll1,
    Person,
    Limit,
    Delete,
    Stop1,
    Stop2,
    Reset,
  },
  data() {
    return {
      params: {
        pageNum: 1,
        orgId: "",
        pageSize: 10,
        realName: "",
        status: "",
      },
      filterText: "",
      visible: true,
      isTrue:true,
      imageUrl: "",
      name:'',
      // <!-- 角色说明 -->
      dialogVisible: false,
      // 角色名称
      input1: "",
      // 状态
      value: "",
      // 查看
      // 登录名
      role: "",
      //  岗位
      job: "",
      // 状态
      status: "",
      // 电子邮件
      email: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "启用",
        },
        {
          value: 2,
          label: "禁用",
        },
      ],
      // 保存的ID
      multipleSelection: [],
      // 列表数量
      total: 0,
      // 用户管理分页列表
      tableData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.get();
   
    // 部门树
    this.Api.treeUser().then((res) => {
      this.data = res.data;
    });
  },
  methods: {
    get() {
      this.get1()
      this.Api.getUser(this.params).then((res) => {
        
        this.tableData = res.data.records;
        console.log(this.tableData,'11111111111111');
        this.total = res.data.total;
        this.tableData.forEach((res,index)=>{
            if(res.realName===this.name){
            
            }
        })
      
      });
    },
     get1() {
      this.Api.getpersonDetail().then((res) => {
        this.name = res.data.realName;
      });
    },
    // 查询
    search() {
      this.Api.searchUser({
        pageNum: 1,
        pageSize: 10,
        realName: this.input1,
        status: this.value,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    reset() {
      this.input1 = "";
      this.value = "";
      this.get();
    },
    // 查看
    look(row) {
      this.dialogVisible = true;
      this.Api.editUser({ id: row.id }).then((res) => {
        console.log(res);
        // 登录名
        this.role = res.data.loginName;
        //  岗位
        this.job = res.data.orgPath;
        // 状态
        // this.status = res.data.status+"";
        if(res.data.status=="1"){
          this.status='启用'
        }else{
          this.status='停用'
        }
        // 电子邮件
        this.email = res.data.email;
        console.log(this.status);
      });
    },
    // 删除
    clearOne(id) {
      this.Api.deleteUser({
        ids: [
          {
            id: id,
          },
        ],
      }).then((res) => {
        if(res.code==0){
          this.$message.success('删除成功')
             this.get();
        }else{
          return this.$message.error(res.message)
        }
     
      });
    },
    // 分页
    //数据条数发生变化
    handleSizeChange(newSize) {
      this.params.pageSize = newSize;
      this.get();
    },
    //翻页触发
    handleCurrentChange(currPage) {
      this.params.pageNum = currPage;
      this.get();
    },
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "标题") {
        return "padding-left: 20px"; // 修改的样式
      } else {
        return "";
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 1) {
        //指定坐标
        return "padding-left:12px";
      } else {
        return "";
      }
    },

    // 树形控件
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      console.log(data);
      this.Api.searchUser1({
        pageNum: 1,
        pageSize: 10,
          orgId: data.id,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
  },
  // 树形控件
  watch: {
    
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
<style lang="less" scoped>
.a{
  display: inline-block;
  width:120px;
  font-size: 14px!important;
  text-align: right;
  margin: 10px;
}
.top {
  width: 1540px;
  height: 68px;
  line-height: 68px;
  color: #333333;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}
.box {
  width: 1245px;
}
.banner {
  display: flex;
}
.left1 {
  width: 294px;
}
.top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.left {
  display: flex;
  margin-top: 19px;
  align-items: center;
}
.right {
  display: flex;
  margin-top: 19px;
}
/deep/.left .el-input__inner {
  width: 154px;
  height: 36px;
}
/deep/.left .el-input {
  width: 154px;
}
.left span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
}
.el-button {
  width: 52px;
  height: 36px;
  padding: 0;
}
.five {
  width: 60px;
  height: 28px;
  margin-right: 21px;
}
.first,
.second,
.third {
  margin-right: 20px;
}
/deep/ .add.el-button {
  width: 80px;
}
/deep/.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  margin-top: 46px;
}
.fenye {
  display: flex;
  justify-content: flex-end;
}
/deep/.el-pagination__jump {
  margin-left: 0;
  font-weight: 400;
  color: #606266;
}
.up {
  margin-right: 23px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 10px;
  background: #e6e9ed;
}

/deep/.el-form-item__label {
  width: 82px !important;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

/deep/tbody {
  tr {
    height: 45px !important;
    td {
      padding: 0px 0 !important;
    }
  }
  tr td:last-child {
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
/deep/tbody {
  tr td:nth-child(2) {
    .cell {
      padding-left: 20px;
    }
  }
}

/deep/.el-icon-warning:before {
  content: "\e7a3";
  position: absolute;
  top: -54px !important;
}
.role {
  margin-top: 10px;
  font-size: 12px;
  color: #999999;
  margin-left: 40px;
}
.look {
  display: block;
  color: #1677ff;
  font-size: 14px;
  border-left: none;
  width: 48px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  border-left: 1px solid #dddddd;
}
.a {
  font-size: 16px;
  color: #333333;
}
.b {
  margin-top: 12px;
  width: 246px;
  height: 36px;
}
.tree {
  margin-top: 24px;
  height: 300px;
}
.green-border {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: rgba(82, 196, 26, 1);
  border-radius: 50%;
  margin-right: 8px;
}
.red-border {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: rgba(251, 54, 63, 1);
  border-radius: 50%;
  margin-right: 8px;
}
</style>